<script>
import Panda from '@/components/Panda.vue';
import Tiger from '@/components/Tiger.vue';

export default {
  name: 'animal component',
  components: {
    Panda,
    Tiger
  },
  mounted() {
    // 通过模板引用访问子组件
    const p = this.$refs.panda;
    console.log( 'animal panda:', p );
    console.log( 'animal panda:', p.increase );
    // 通过模板引用访问子组件
    const t = this.$refs.tiger;
    console.log( 'animal tiger:', t );
  }
}
</script>

<template>
  <div>
    <p>在父组件中通过attribute向子组件传递数据</p>
    <Panda :id="1" name="大美" ref="panda"></Panda>
    <Tiger :id="2" name="跳跳虎" class="thin-tiger" ref="tiger"></Tiger>
  </div>
</template>